<template>
  <div class="zw-order-list">
    <div class="zw-header">
      <ul>
        <li
          :class="{ 'is-active': currentStatus == 'completed' }"
          @click="changeStatus('completed')"
        >
          <span>已完成</span>
        </li>
        <li
          :class="{ 'is-active': currentStatus == 'tobepay' }"
          @click="changeStatus('tobepay')"
        >
          <span>待支付</span>
        </li>
        <li><span class="icon"></span></li>
      </ul>
    </div>
    <div class="zw-count">
      <span class="zw-gray">
        {{
          currentStatus !== "completed" ? "待付款订单" : "已完成订单总数"
        }}:</span
      >
      <span class="zw-bold zw-large">{{ totalSize }}</span>
    </div>
    <div class="zw-card" v-for="item in orderList[this.currentStatus]">
      <div class="zw-card--row zw-col-lr">
        <p>
          <span class="icon zw-gray">{{ item.user.username }}</span
          ><small class="small zw-gray">{{ item.user.phone }}</small>
        </p>
        <p>
          <span class="zw-bold">{{ item.payType | payType }}</span>
        </p>
      </div>
      <div class="zw-card--row zw-col-lr">
        <p>
          <span class="zw-gray">{{ item.updateTime | unixToDate }}</span>
        </p>
        <p>
          <span class="zw-gray">{{ item.code }}</span>
        </p>
      </div>
      <ul class="zw-card--row ul">
        <li>
          <img
            src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/link/1121_link1_1.png"
            alt=""
          />
        </li>
        <li>
          <div class="p title">{{ item.items[0].pName }}</div>
          <div class="p value zw-col-lr zw-card--row zw-gray">
            <p>
              <span style="color: #fd7d6a" class="zw-large">
                {{ item.realAmount }}</span
              >
            </p>
            <p>X{{ item.itemNumer }}</p>
          </div>
        </li>
      </ul>
      <div class="zw-card--row t_r">
        <p>
          <span class="zw-gray">总金额：</span
          ><span class="">{{ item.amount }}</span>
        </p>
      </div>
      <div class="zw-card--row lh30 t_r zw-large">
        <p class="zw-bold">
          <span class="">实付金额：</span><span>{{ item.realAmount }}</span>
        </p>
      </div>
    </div>
  </div>
</template>
<script>
import { Toast, MessageBox } from "mint-ui";
import { mapGetters, mapActions } from "vuex";
import { wxshare } from "common/mixin";
import { getDoctorOrderList } from "api/channel";

export default {
  mixins: [wxshare],
  data() {
    return {
      currentStatus: "completed",
      typeCode: 1,
      totalSize: 0,
      isActive: true,
      userId: this.$route.query.userId,
      orderList: {
        completed: [],
        tobepay: [],
      },
      isSendingRequest: true,
    };
  },
  watch: {
    $route(to, from) {
      this.userId = to.query.userId;
      this.getOrderList();
    },
  },
  methods: {
    changeStatus: function (status) {
      if (status == this.currentStatus) return;
      this.currentStatus = status;
      this.typeCode = status == "completed" ? 1 : 2;
      this.getOrderList();
    },
    getOrderList: function () {
      this.isSendingRequest = true;
      getDoctorOrderList({ type: this.typeCode })
        .then((result) => {
          this.orderList[this.currentStatus] = result.data;
          this.totalSize = result.data && result.data.length;
          this.isSendingRequest = false;
        })
        .catch(() => {
          this.isSendingRequest = false;
        });
    },
  },
  mounted() {
    this.getOrderList();
  },
};
</script>
<style lang="less">
@import "./order";
.mint-msgbox-input {
  input {
    height: 2rem;
  }
}
</style>
